<template>
  <view>
    <view style="background-color: white; width: 100%;height: var(--status-bar-height);">
      <!-- 这里是状态栏 -->
    </view>
    <uni-nav-bar color="#000" right-icon="checkmarkempty" @clickRight="clickOK()" left-icon="left"
                 @clickLeft="navBack()" title="详细数据"/>

    <view class="container">
      <view class="list-item">
        <view class="section"></view>
        <view class="content">
          <text class="title">实验名称</text>
          <text class="description">{{ expername }}</text>
        </view>
      </view>

      <view class="list-item">
        <view class="section"></view>
        <view class="content">
          <text class="title">实验设备</text>
          <text class="description">{{ experequipname }}</text>
        </view>
      </view>

      <view class="list-item">
        <view class="section"></view>
        <view class="content">
          <text class="title">实验简介</text>
          <text class="description">{{ experins }}</text>
        </view>
      </view>
    </view>

    <!-- <uni-section class="mb-10" title="预期阶段实验温度变化详表" type="line"></uni-section>
    <view class="charts-box">
      <view class="table">
        <senior-table :headers="dataTable.headers" :contents="dataTable.contents" :urlCol="dataTable.urlCol" :firstLineFixed="true" :sortCol="dataTable.sortCol"></senior-table>
      </view>
    </view> -->
    <view class="tempsection" style="margin-bottom: 20rpx;">
      <view class="flex-row items-center space-x-20">
        <view class="section"></view>
        <view class="flex-col items-start flex-auto space-y-10">
          <text class="font_2">预期阶段实验温度变化详表</text>
        </view>
      </view>
      <view class="charts-box">
        <view class="table">
          <senior-table :headers="dataTable.headers" :contents="dataTable.contents" :urlCol="dataTable.urlCol"
                        :firstLineFixed="true" :sortCol="dataTable.sortCol"></senior-table>
        </view>
      </view>
    </view>

    <!-- <uni-section class="mb-10" title="预期温度变化占比图" type="line"></uni-section>
    <view class="charts-box">
      <qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2"></qiun-data-charts>
    </view> -->
    <view class="tempsection" style="margin-bottom: 20rpx;">
<!--      <view class="flex-row items-center space-x-20">-->
<!--        <view class="section"></view>-->
<!--        <view class="flex-col items-start flex-auto space-y-10">-->
<!--          <text class="font_2">预期温度曲线图 (℃-分钟)</text>-->
<!--        </view>-->
<!--      </view>-->
<!--      <view class="charts-box">-->
        <qiun-data-charts type="area" :eopts="opts1" :chartData="chartData1" :echartsH5="true"
                          :echartsApp="true"></qiun-data-charts>
<!--      </view>-->
    </view>
    <view class="tempsection" style="margin-bottom: 20rpx;">
<!--      <view class="flex-row items-center space-x-20">-->
<!--        <view class="section"></view>-->
<!--        <view class="flex-col items-start flex-auto space-y-10">-->
<!--          <text class="font_2">预期温度变化占比图</text>-->
<!--        </view>-->
<!--      </view>-->
<!--      <view class="charts-box">-->
        <qiun-data-charts type="ring" :eopts="opts2" :chartData="chartData2" :echartsH5="true"
                          :echartsApp="true"></qiun-data-charts>
<!--      </view>-->
    </view>

    <!-- <uni-section class="mb-10" title="预期温度曲线图 (℃-分钟)" type="line"></uni-section>
    <view class="charts-box">
      <qiun-data-charts type="area" :opts="opts1" :chartData="chartData1"></qiun-data-charts>
    </view> -->



    <view class="button_box">
      <button @click="clickchangebutton()">修改实验</button>
      <button @click="clickdeletebutton()">删除实验</button>
    </view>

  </view>
</template>

<script>
import {
  mapState,
  mapMutations
} from 'vuex';
import {_getbyid} from '@/service/myexper_api.js'
import {_deletebyid} from '@/service/myexper_api.js'
import SeniorTable from "@/components/data-table/senior-table.vue"
import QiunDataCharts from "../../uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";

export default {
  components: {
    QiunDataCharts,
    SeniorTable
  },
  computed: {
    ...mapState(['hasLogin', 'userInfo', 'accountNum'])
  },
  data() {
    return {
      expername: '',//实验名称
      experequipname: '',//实验设备名称
      experins: "",
      experid: '',
      expertotaltime: 0,//实验总时长？
      experdot: '',
      details: {},
      temp_last: '',//最终温度

      //table
      dataTable: {
        headers: [
          {
            label: "阶段",
            key: "col1"
          }, {
            label: "起始温度",
            key: "col2"
          }, {
            label: "最后温度",
            key: "col3"
          }, {
            label: "实验时长",
            key: "col4"
          },
          {
            label: "速率",
            key: "col5"
          },
          {
            label: "备注",
            key: "col6"
          }
        ],
        contents: [],
        sortCol: [
          {
            key: "col2",
            isNumber: true
          },
          {
            key: "col3",
            isNumber: true
          },
          {
            key: "col4",
            isNumber: true
          },
          {
            key: "col5",
            isNumber: true
          }
        ]
      },

      //图
      chartData1: {},
      opts1: {
        title: {
          show: true,
          text: '预期温度曲线图 (℃/S)',
          textStyle: {
            fontSize: 15,
          }
        },
        legend: {
          show: true,
          top: "top",
          right: 20,
        },
        grid: [{
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "15%",
          // show: false,
          containLabel: true
        }],
        xAxis: {
          show: true,
          type: 'category',
          axisTick: {
            show: true,
            alignWithLabel: true//刻度线与标签对齐
          }
        },
        yAxis: {
          show: true,
          // type: 'value',
          splitNumber: 5,
          splitLine: {
            show: false//显示网格线
          },
          axisLine: {
            show: true,
          }
        }
      },
      chartData2: {},
      opts2: {
        legend: {
          show: true,
          top: "center",
          right: "right",
        },
        title: {
          text: "预期温度变化占比图",
          subtext: "",
          textStyle: {
            fontSize: 15,
          },
          subtextStyle: {
            fontSize: 20,
            color: "#7cb5ec"
          }
        }
      },
      serialnum: ''

    }
  },
  onLoad(opt) {
    uni.getSystemInfo({
      success: (res) => {
        this.opts1.title.textStyle.fontSize = 15 * res.windowWidth / 407;
        this.opts2.title.textStyle.fontSize = 15 * res.windowWidth / 407;
        this.opts2.title.subtextStyle.fontSize = 15 * res.windowWidth / 407;

      }
    });
    this.serialnum = opt.serialnum;
  },
  onReady() {
    const self = this;
    try {
      const value = uni.getStorageSync('myexperData');
      if (value) {
        this.experid = value;
        this.getexperdata().then(function (data) {
          self.expername = data.name_exper
          self.experins = data.ins_exper
          self.experequipname = data.equip_exper
          self.details = data.details
          self.expertotaltime = data.time_exper
          //console.log(self.expertotaltime )
          self.experdot = data.num_node
          setTimeout(() => {
            self.setDataForTable();
            self.setDataForchart1();
            self.setDataForchart2();
          }, 300)
        }).catch(function (data) {
          console.log(data);
        });
      }
    } catch (e) {
      console.log(e);
    }


  },
  methods: {
    ...mapMutations(['login', 'isSetExper', 'logoutExper']),
    async getexperdata() {
      let res;
      try {
        res = await _getbyid(this.experid);
      } catch (error) {
        throw error; //抛出异常
      }
      if (res.flag != true) {
        //console.log(res.data)
        throw new Error("错误")
      }
      return res.data;
    },
    setDataForTable() {
      //this.dataTable.contents = []
      //console.log(this.details.temporary_ins.length+""+this.details.temporary.length)
      for (let i = 0; i < this.details.temporary_ins.length; i++) {
        const initiating = this.details.temporary[i], terminating = this.details.temporary[i + 1];
        const tempBegin = initiating.temp, tempEnd = terminating.temp;
        const timeBegin = initiating.time, timeEnd = terminating.time, deltaTime = timeEnd - timeBegin;
        const v = ((tempEnd - tempBegin) / deltaTime * 60).toFixed(1);
        this.dataTable.contents.push({
          col1: this.details.temporary_ins[i].phase,//阶段量
          col2: tempBegin + "℃",//起始温度
          col3: tempEnd + "℃",//最后温度
          col4: deltaTime + "分钟",//实验时长
          col5: v + "℃/小时",//速率
          col6: this.details.temporary_ins[i].ins//备注
        })
      }
      this.temp_last = this.details.temporary[this.details.temporary.length - 1].temp
    },
    setDataForchart1() {
      let categories = [];
      let data = [];
      let series = [];
      // for (let i = 0; i < this.details.temporary.length; i++) {
      //   categories.push(this.details.temporary[i].time)
      //   data.push(this.details.temporary[i].temp)
      // }
      this.details.temporary.forEach((temporary, index) => {

        if (index === 0) return;
        const lastDot = this.details.temporary[index - 1];
        const k = (temporary.temp - lastDot.temp) / ((temporary.time - lastDot.time) * 60);
        console.log(k,temporary.temp,lastDot.temp)
        const startTime = lastDot.time * 60;
        const endTime = temporary.time * 60;
        for (let time = startTime; time <= endTime; ++time) {
          categories.push(time);
          data.push(Number((lastDot.temp + k * (time - startTime)).toFixed(2)));//使用了点斜式
          // data.push(Math.round(lastDot.temp + k * (time - startTime)));//使用了点斜式
        }
      });
      series.push({
        name: "预期工作温度",
        label: {
          show: false,
        },
        emphasis: {
          disabled: true,
        },
        data
      })
      let res1 = {
        categories,
        series
      }
      this.chartData1 = JSON.parse(JSON.stringify(res1));
    },
    setDataForchart2() {
      this.details.total_time = this.details.temporary[this.details.temporary.length - 1].time;
      //后端这个总时间不对，前端手算
      this.opts2.title.subtext = (this.details.total_time / 60).toFixed(1) + "小时";
      // var t_rise = (this.details.rise_time/60).toFixed(1)
      // var t_fixed = (this.details.fixed_time/60).toFixed(1)
      // var t_reduce = (this.details.reduce_time/60).toFixed(1)
      let res2 = {
        series: [
          {
            data: [
              {
                "name": "增温",
                "value": this.details.rise_time,
              }, {
                "name": "恒温",
                "value": this.details.fixed_time,
              }, {
                "name": "降温",
                "value": this.details.reduce_time,
              }
            ]
          }
        ]
      };
      this.chartData2 = JSON.parse(JSON.stringify(res2));
    },
    navBack() {
      uni.navigateBack({});
    },
    clickOK() {
      let newdata = {
        chartData: this.chartData1,
        expername: this.expername,
        temp_last: this.temp_last,
        temporary: this.details.temporary
      }
      console.log(newdata)
      uni.showModal({
        title: "设置实验",
        content: "是否选择\n" + this.expername + "？",
        success: function (e) {
          if (e.confirm) {
            this.isSetExper()
            try {
              uni.setStorageSync(this.serialnum + 'setexperforequip', newdata);
            } catch (e) {
              throw e;
            }
            setTimeout(() => {
              uni.navigateBack({
                delta: 2
              })
            }, 300)
          }
        }.bind(this)
      })
    },
    clickchangebutton() {
      let newdata = {
        experid: this.experid,
        expername: this.expername,
        experins: this.experins,
        experequipname: this.experequipname,
        expertotaltime: this.expertotaltime,
        experdot: this.experdot,
        details: this.details
      }
      uni.setStorage({
        key: 'changemyexperdata',
        data: newdata
      })
      uni.navigateTo({
        url: '../changemyexper/changemyexper'
      })
    },
    clickdeletebutton() {
      uni.showModal({
        title: "删除实验",
        content: "是否删除\n" + this.expername + "？",
        success: function (e) {
          if (e.confirm) {
            uni.showLoading({
              title: "删除中..."
            });
            this.deleteexper()
          }
        }.bind(this)
      })
    },
    async deleteexper() {
      let res = await _deletebyid(this.experid)
      if (res.flag = true) {
        uni.hideLoading()
        this.$api.msg('删除成功！');
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 400)
      } else {
        uni.hideLoading()
        this.$api.msg('删除失败！');
      }
    }
  }
}
</script>

<style lang="scss">
page {
  min-height: 100%;
  // background: $page-color-base;
}

.charts-box {
  background: #fff;
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;

  width: 730rpx;
}

.mb-10 {
  margin-left: 10rpx;
  margin-right: 10rpx;
  margin-top: 20rpx;

  text {
    color: #999;
  }
}

.table {
  padding-left: 10upx;
  padding-right: 10upx;
}

.button_box {
  display: flex;
  width: 100%;
  padding-top: 40upx;

  button {
    background-color: #138f87;
    color: #fff;
    padding-left: 100upx;
    padding-right: 100upx;
    font-size: 33upx;
    height: 80upx;
    line-height: 80upx;
    border-radius: 50upx;
    margin-bottom: 40upx;
  }
}

.container {
  display: flex;
  flex-direction: column;
}

.list-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
  padding: 10rpx;
  border-radius: 14.58rpx;
  box-shadow: 0px 4.17rpx 8.33rpx 2.08rpx rgba(0, 0, 0, 0.25);
  border: solid 2.08rpx #138f8780;
}

.section {
  background-color: #138f87;
  border-radius: 14.58rpx;
  width: 8.33rpx;
  height: 35.42rpx;
  margin-left: 15rpx;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.title {
  font-size: 33.33rpx;
  font-family: WenQuanYiMicroHeiMono;
  line-height: 30.21rpx;
  color: #000000;
  margin-left: 10rpx;
}

.description {
  font-size: 29.17rpx;
  font-family: WenQuanYiMicroHeiMono;
  line-height: 27.08rpx;
  color: #868686;
  margin-left: 10rpx;
  margin-top: 20rpx;
}

.tempsection {
  background-color: #ffffff;
  border-radius: 14.58rpx;
  box-shadow: 0px 4.17rpx 8.33rpx 2.08rpx rgba(0, 0, 0, 0.25);
  margin-left: 10rpx;
  margin-right: 10rpx;
  border: solid 2.08rpx #138f8780;
  height: 600rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


</style>
